<template>
  <div class="main" v-if="isShow">
    <div class="container">
      <div class="close-btn">
        <el-icon color="#fe455d" size="25px" @click="isShow = false">
          <CircleCloseFilled />
        </el-icon>
      </div>
      <div class="title">
        <div style="position: absolute; left: 50%; transform: translateX(-50%);font-size: 24px;font-weight: 600;">
          收货地址管理
        </div>
        <el-button size="large" type="danger" plain :icon="Plus" style="font-size: 16px;"
          @click="showAddAddressDialog">新增地址</el-button>
      </div>
      <el-table :data="addressList" stripe style="font-size: 18px;height: 80%;" empty-text="还没有地址数据" border>
        <el-table-column prop="" label="默认地址" width="100">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag effect="light" type="danger" round v-if="scope.row.isDefault === '1'" disabled>
                默认地址
              </el-tag>
              <el-tag effect="plain" type="primary" round v-else style="cursor: pointer;"
                @click="setDefaultAddress(scope.row)">
                设为默认
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="收货人" width="120" />
        <el-table-column prop="phone" label="电话" width="180" />
        <el-table-column prop="address" label="详细地址" min-width="300" />
        <el-table-column fixed="right" label="操作" width="110">
          <template #default="scope">
            <el-button type="primary" @click="showEditAddressDialog(scope.row.id)" :icon="Edit" circle
              style="background-color: #3d8af5;" />
            <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon-color="#fe3b55" title="确认删除此地址?"
              @confirm="deleteAddress(scope.row.id)">
              <template #reference>
                <el-button type="danger" :icon="Delete" circle style="background-color: #fe3b55;" />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增地址弹窗 -->
    <el-dialog v-model="isShowAddAddressDialog" :title="dialogTitle" width="500" :lock-scroll="false" center
      align-center :show-close="false" style="border-radius: 15px; padding: 20px 40px;">
      <!-- 表单 -->
      <el-form ref="addressFormRef" style="max-width: 600px" status-icon :rules="rules" label-position="right"
        :model="addressForm" label-width="auto" class="demo-ruleForm">
        <el-form-item label="收货人" prop="name">
          <el-input v-model="addressForm.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addressForm.phone" maxlength="11" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="addressForm.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="cancel-btn"
            @click="isShowAddAddressDialog = false, resetForm(addressFormRef)">取消</el-button>
          <!-- 新增地址展示的按钮 -->
          <el-button v-if="!isEditing" type="primary"
            @click="isShowAddAddressDialog = false, saveAddress(addressFormRef)">
            添加
          </el-button>
          <!-- 编辑地址展示的按钮 -->
          <el-button v-else type="primary" @click="isShowAddAddressDialog = false, updateAddress(addressFormRef)">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { CircleCloseFilled, Edit, Delete, Plus } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
// 新增地址还是编辑地址标识
const isEditing = ref<boolean>(false)
// 新增地址对话框标题
const dialogTitle = ref<string>('')
const addressFormRef = ref<FormInstance>()
// 是否展示登陆框
const isShow = ref(false)
const isShowAddAddressDialog = ref(false)
// 展示新增地址对话框
const showAddAddressDialog = () => {
  isEditing.value = false
  dialogTitle.value = '新增地址'
  isShowAddAddressDialog.value = true
}

// 展示编辑地址对话框
const showEditAddressDialog = (id: string) => {
  isEditing.value = true
  dialogTitle.value = '编辑地址'
  getAddress(id)
  isShowAddAddressDialog.value = true
}
// 展示登陆框
const show = () => {
  isShow.value = true
}
// 暴露给外部的方法
defineExpose({
  show,
})
// 监听 isShow 的变化，仅在 isShow 变为 true 时调用 getAddressList
watch(isShow, (newVal) => {
  if (newVal) {
    getAddressList()
  }
})

// 用户地址数据及相关方法
import useAddress from '@/hooks/useAddress'
import type { FormInstance } from 'element-plus';
const { addressList, addressForm, rules, resetForm, getAddressList, setDefaultAddress, getAddress,
  saveAddress, deleteAddress, updateAddress } = useAddress()

</script>

<style lang='scss' scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: var(--mask-background-color);
  backdrop-filter: blur(3px);
  /* 初始背景色透明 */
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  /* 禁用遮罩下方元素的点击事件 */
  z-index: 2;

  /* 确保遮罩在最上层 */
  .container {
    width: calc(var(--view-width) * 0.8);
    height: calc(var(--view-height) * 0.7);
    background-color: var(--background-color);
    position: relative;
    border-radius: 15px;
    padding: 20px 50px;

    .title {
      display: flex;
      justify-content: end;
      align-items: center;
      margin: 20px 0;

      button {
        width: 120px;
        height: 40px;
        background: rgba(var(--theme-color-rgb), 0.1);
        color: var(--theme-color);
        border: none;
        font-size: 14px;
        border-radius: 20px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .close-btn {
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 3;

      &:hover {
        transform: scale(1.2);
      }
    }


  }

  .dialog-footer {
    button {
      width: 60px;
      height: 30px;
      background: rgba(var(--theme-color-rgb), 0.1);
      color: var(--theme-color);
      border: none;
      font-size: 14px;
      border-radius: 20px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        transform: scale(1.05);
      }
    }

    .cancel-btn {
      background: rgba(var(--theme-blue-color-rgb), 0.1);
      color: var(--theme-blue-color);
    }

  }
}
</style>
